<template>
  <div class="home">
    <h2>选择平台登录</h2>
    <div class="platforms">
      <button @click="login('xiaohongshu')" class="platform-btn xhs">
        小红书登录
      </button>
      <button @click="login('bilibili')" class="platform-btn bili">
        哔哩哔哩登录
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  methods: {
    login(platform) {
      console.log(`尝试登录: ${platform}`);
      // 这里将添加实际的登录逻辑
      alert(`正在连接到${platform}...`);
    }
  }
}
</script>

<style scoped>
.home {
  max-width: 800px;
  margin: 0 auto;
}
.platforms {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}
.platform-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s;
}
.platform-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.xhs {
  background-color: #ff2442;
  color: white;
}
.bili {
  background-color: #fb7299;
  color: white;
}
</style>